<template>
  <header class="header">
    <img src="../../../../../public/200.png" alt="Logo" class="logo">
    <h1 class="animated-title">
      <span>土</span><span>地</span><span>革</span><span>命</span><span>史</span>
    </h1>
  </header>
</template>

<script>
export default {
  name: 'Header1'
}
</script>

<style scoped>
.header {
  background-color: #d32f2f;
  color: white;
  padding: 10px 20px;
  text-align: center;
}
span{
  width: 40px;
}
.logo {
  width: 100%;
  height: 300px;
}
.animated-title {
  font-size: 24px; /* 初始字体大小 */
  color: white; /* 初始颜色 */
}
.animated-title span {
  display: inline-block;
}
/* 定义动画 */
@keyframes changeColorAndSize {
  0%, 100% {
    transform: scale(1);
    color: white;
  }
  50% {
    transform: scale(1.5);
    color: yellow;
  }
}
/* 应用动画到每个字，并设置不同的延迟 */
.animated-title span {
  animation-name: changeColorAndSize;
  animation-duration: 2.7s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
/* 为每个字设置不同的延迟 */
.animated-title span:nth-child(1) {
  animation-delay: 0s;
}
.animated-title span:nth-child(2) {
  animation-delay: 0.6s;
}
.animated-title span:nth-child(3) {
  animation-delay: 1.0s;
}
.animated-title span:nth-child(4) {
  animation-delay: 1.4s;
}
.animated-title span:nth-child(5) {
  animation-delay: 1.8s;
}
</style>